/* 定义主题色变量 */
:root {
  --primary-color: hsl(211 100% 50%);
  --secondary-color: hsl(208 7.3% 45.7%);
  --success-color: hsl(134 61.4% 40.6%);
  --danger-color: hsl(354 70.5% 53.5%);
  --warning-color: hsl(45 100% 51.4%);
  --info-color: hsl(188 77.8% 40.6%);
  --light-color: hsl(210 16.7% 97.6%);
  --dark-color: hsl(210 10.3% 22.7%);
  --white: hsl(0 0% 100%);
  --gray-100: hsl(210 16.7% 97.6%);
  --gray-200: hsl(210 15.8% 92.5%);
  --gray-300: hsl(210 13.8% 88.6%);
  --gray-400: hsl(210 14% 83.1%);
  --gray-500: hsl(210 10.8% 71%);
  --gray-600: hsl(208 7.3% 45.7%);
  --gray-700: hsl(210 8.8% 31.4%);
  --gray-800: hsl(210 10.3% 22.7%);
  --gray-900: hsl(210 10.8% 14.5%);
  --z-loading-indicator: 100;
  --z-nav-menu: 200;
  --z-dropdown-menu: 300;
  --z-modal-backdrop: 400;
  --z-modal-body: 410;
}

/* 基础设置：字体、颜色、盒模型 */
:root {
  font-size: calc(1vw + 0.6em); /* 自适应字体，其他元素再设置字体时使用rem */
  color: var(--dark-color);
  background-color: var(--light-color);
  box-sizing: border-box;
}

/* 不同的屏幕尺寸下的字体大小 */
@media (min-width: 50em) {
  :root {
    font-size: 1.125em;
  }
}

/* 盒模型继承：修复父元素盒模型，子元素盒模型自动继承 */
*,
::before,
::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
